<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>select</title>
<meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
    var _input = $(".select").find("input");
    var _selectBtn = $(".select").find(".btn");
    var _listPanel = $(".select").find(".optionlist");
    var _optionList = $(".select > .optionlist").find("li");

    var currentPanelHeight = $(_listPanel).height();
    var selectPanelTop = $(".select").offset().top;
    var defaultPanelTop = selectPanelTop + $(_input).height();

    $(_selectBtn).click(function(){
        var panelHeight = currentPanelHeight;
        var bottomGap = document.documentElement.clientHeight - selectPanelTop - $("select").height();
        var panelState = $(_listPanel).css("display");
        console.log("--selectPanelTop--"+selectPanelTop+"--bottomGap--"+bottomGap);
        if(selectPanelTop > bottomGap){
            console.log("---上面显示--");
            if(panelHeight > selectPanelTop){
                panelHeight = selectPanelTop - 5
            }
            $(_listPanel).css({top:'auto',bottom :$(".select").height() , height : panelHeight})

        }else{
            console.log("--- 下面显示--");
            if(defaultPanelTop + panelHeight > document.documentElement.clientHeight){
                panelHeight = document.documentElement.clientHeight - defaultPanelTop - 15;
            }
            $(_listPanel).css({top : $(".select").height(),height : panelHeight})

        }
//        执行切换
        swichPanel(panelState);
    })


//        隐藏面板初始化面板高度
    function swichPanel(panelState){

        $(_listPanel).slideToggle(100,function(){

            if(panelState != "none"){
                $(_listPanel).css({height : ''})
            }
        })

    }

//    选中列表点击事件
    $(_optionList).click(function () {

        $(this).addClass("selected").siblings().removeClass("selected");
        $(_input).val($(this).text());
        $(_selectBtn).click();

    })


})
</script>
<style type="text/css">
*{ padding:0px; margin:0px; list-style:none;}
.select{ position:relative; width:240px; height:30px; border:#999 1px solid; margin:50px;margin-top: 200px;}
.select input{ width:200px; height:20px; line-height:20px; background:#fff; border:none; padding:5px; float:left;}
.select .btn{ width:29px; height:30px; border-left:#999 1px solid; background:#eee; cursor:pointer; float:left;}
.select .btn span{ width:0px; height:0px; border:transparent 6px solid; border-top:#666 6px solid; margin-top:12px; margin-left:8px; float:left;}
.select .btn:hover{ background:#dedede;}
.select .optionlist{ position:absolute; border:#999 1px solid; padding:1px; background:#fff; left:-1px; top:30px; right:-1px; overflow:hidden; z-index:10; display:none;overflow-y: auto;}
.select .optionlist li{ height:30px; padding-left:5px; line-height:30px; color:#333; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer;}
.select .optionlist li:hover{background:#eee;}
.select .optionlist li.selected{background:#999; color:#fff;}
</style>
</head>
<body>
<ul><li></li></ul>
<div class="select">
	<input type="text" value="请选择" />
	<div class="btn">
    	<span></span>
    </div>
    <ul class="optionlist">
    	<li>111111</li>
    	<li>222222222222</li>
    	<li>3333333333</li>
    	<li>444444444</li>
    	<li>555555555555</li>
    	<li>6666666666666666</li>
    	<li>77777777777</li>
    	<li>8888888888</li>
    	<li>99999999999</li>
    	<li>dddddddddddd</li>
    	<li>fffffffffff</li>
    	<li>ffffsssssssssssssss</li>
    	<li>tttttttttttttt</li>
    	<li>hhhhhhhhhhhhhh</li>
    	<li>bbbbbbbbbbbbbbbbb</li>
    	<li>nnnnnnnnnnnnnnnnnn</li>
    	<li>uuuuuuuuuuuuuuuu</li>
    	<li>5555555588888888</li>
    	<li>llllllllllllllllllllll</li>
    </ul>
</div>
</body>
</html>
